<link rel="stylesheet" type="text/css" href="<?php echo css_url().'general_form.css'?>">
<link rel="stylesheet" type="text/css" href="<?php echo css_url().'table/list_show.css'?>">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<?php $CI =& get_instance();
$CI->load->helper('string_addition');
?>
<form id="edit-user-qualification-form" action="<?php echo site_url().'/user_group3/account/edit_user_qualification'?>" method="post">
    <input id="currentid" name="currentid" value="-2" type="hidden">
    <ol>
        <li>
            <div class='head'>Edit Qualification:</div>
            <div id="qualification-section" class="tab">
                <div class="styled-select" >
                    <select name="Qualification" tabindex="0" id="qualification">
                        <option value="<?php echo $UserInfo['Qualification']?>"><?php echo QualificationRecognize($UserInfo['Qualification'])?></option>
                        <option value="1">Primary </option>
                        <option value="2">Junior High</option>
                        <option value="3">High School</option>                              
                        <option value="4">College</option>
                        <option value="5">University</option>
                        <option value="6">Bachelor</option>
                        <option value="7">Master</option>
                        <option value="8">Doctor</option>
                    </select>
                </div> 
            </div>
        </li>
        
        <li>
            <div class='head'>Additional Qualification:
                <div id="add-new-qualification" class="margin-left add-btn" style='position:relative; left: 11%'>Add New</div>
            </div>
            
            <div>
                <?php 
                $Qualifications =  $CI->db->get_where(MYSQL_TABLE_PREFLIX.TABLE_USER3_ADDITIONAL_QUALIFICATION, 
                        array('RelUserEmail' => $UserInfo['UserEmail']));
                $Qualifications = $Qualifications->result_array();        
                $CI->load->library('table');
                $data = array(
                             array('Name', 'Level', 'Link','Year'),
                             );
                $i = 0;
                foreach($Qualifications as $Qualification){
                    //Strip Qualification Name
                    $QualificationString = "";
                    $QualificationNames = explode('#',$Qualification['QualificationName']);    
                    foreach($QualificationNames as $Name){
                        $QualificationString .= $Name." - ";
                    }
                    $QualificationString = substr($QualificationString, 0, -3);
                    
                    $data[] = array($QualificationString,$Qualification['QualificationLevel'],
                            $Qualification['ConfirmLink'],$Qualification['Year'],
                            '<div button="edit-qualification" class="add-btn" number="'.$i.'">Edit</div>',
                            '<div button="delete-qualification" class="add-btn" number="'.$i.'">Remove</div>' 
                        );
                    $i++;
                }
                $tmpl = array (
                    'table_open'          => '<table class="list_show">',
                 );
                $CI->table->set_template($tmpl); 
                echo $CI->table->generate($data); 
                ?>
            </div>
        </li>
        <li>
            <div id="addional-qualification-section" class="tab">           
                       
            </div>
        </lI>
        
        <li>
            <div class="tab">
                <div id="edit-user-contact-form-submit" class="submit-bt">Save</div>
            </div>
        </li>
    </ol>
    
</form>
<script src="<?php echo asset_url()."js/string_helper.js"?>"></script>
<script>

    
    var Qualifications = <?php echo json_encode($Qualifications);?>;
    var updateAddAlias = function(){$('div[button="add-alias"]').on("click",function(){
        data = '<input id="main-name" class="text margin-bottom" placeholder="Alias Name" type="text" name="QualificationName[]" typeOf="alias">';
        $(this).parent().parent().append(data);
    });}
    
     var updateDelAlias = function(){$('div[button="delete-alias"]').on("click",function(){
        $(this).parent().parent().children("input[typeOf='alias']:last-child").remove();
    });}
    
    var update = function(){
        updateAddAlias();
        updateDelAlias();
        $("#main-name").on("change",validate_additional_qualification);
    }
    
    
    var update_add_qualification = function(){$('div#add-new-qualification').on('click',function(){
        $("#currentid").val(-1);
        data =  '<div class="hr"/>'
                +'<div>'
                    +'<div class="head">Qualifcation Name:'
                        +'<div button="add-alias" class="margin-left add-btn" style="position:relative; left: 11%">Add Alias</div>'
                        +'<div button="delete-alias" class="margin-left add-btn" style="position:relative; left: 11%">Remove Alias</div>'
                        +'<span id="additional-qualification-error" class="error" style="position:relative; left: 14%;"></span>'
                    +'</div>'
                    +'<input id="main-name" class="text margin-bottom" placeholder="Main Name" type="text" name="QualificationName[]" typeOf="main-name">'
                +'</div>'
                +'<div>'
                    +'<div class="head">Others Attribute:</div>'
                    +'<input class="text margin-bottom" placeholder="Qualification Level" name="QualificationLevel">'
                    +'<input class="text margin-bottom" placeholder="Confirm Link" name="ConfirmLink">'
                    +'<input class="text margin-bottom" placeholder="Year" name="Year">'
                +'</div>';
        $('#addional-qualification-section').html(data);
        $(this).attr("id","stop-add-edit-qualification");
        $(this).text("Stop Add");
        update_stop_qualification();
        update();
    });}
    
    var update_stop_qualification = function(){$("#stop-add-edit-qualification").on("click",function(){
        $("#currentid").val(-2);
        $("#addional-qualification-section").html("");
        $(this).attr("id","add-new-qualification");
        $(this).text("Add New");
        update_add_workedplace();
    });}
    
    update_add_qualification();
    
    $('div[button="edit-qualification"]').on('click',function(){
         data =  '<div class="hr"/>'
                +'<div>'
                    +'<div class="head">Qualifcation Name:'
                        +'<div button="add-alias" class="margin-left add-btn" style="position:relative; left: 11%">Add Alias</div>'
                        +'<div button="delete-alias" class="margin-left add-btn" style="position:relative; left: 11%">Remove Alias</div>'
                        +'<span id="additional-qualification-error" class="error" style="position:relative; left: 14%;"></span>'
                    +'</div>';
        var id = $(this).attr('number');
        id = parseInt(id); 
        Qualification = Qualifications[id];

        Q_Name = Qualification['QualificationName'].split("#");
        Q_Name_String = '<input class="text margin-bottom" id="main-name" placeholder="Main Name" type="text" name="QualificationName[]" value="'+Q_Name[0]+'" typeOf="main-name">';
        data = data + Q_Name_String;
        for(i = 1; i < Q_Name.length; i++){
            Q_Name_String = '<input class="text margin-bottom" placeholder="Alias Name" type="text" name="QualificationName[]" typeOf="alias" value="{0}">'.format(Q_Name[i]);
            data = data + Q_Name_String;
        }
        
        other_data = ('</div>'
                +'<div>'
                    +'<div class="head">Others Attribute:</div>'
                    +'<input class="text margin-bottom" placeholder="Qualification Level" name="QualificationLevel" value="{0}">'
                    +'<input class="text margin-bottom" placeholder="Confirm Link" name="ConfirmLink" value="{1}">'
                    +'<input class="text margin-bottom" placeholder="Year" name="Year" value="{2}">'
                +'</div>').format(Qualification['QualificationLevel'],Qualification['ConfirmLink'],Qualification['Year']);
        
        data = data + other_data;
        $("#addional-qualification-section").html(data);
        $("#currentid").val(Qualification['QualificationID']);
        $("#add-new-qualification").text("Stop Edit");
        $("#add-new-qualification").attr("id","stop-add-edit-qualification");
        update_stop_qualification();
        update();
    });
    
    $('div[button="delete-qualification"]').on('click',function(){
        var id = $(this).attr('number');
        id = parseInt(id); 
        ConfirmDialog("Are you sure to delete this qualification?", id, delete_qual);
    });
    
    function delete_qual(id){
        Qualification = Qualifications[id];
        url_link = "<?php echo site_url()."/user_group3/account/delete_qualification"?>";
        var result;
        $.ajax({
            url : url_link,
            type: 'post',
            async: false,
            data: { ID : Qualification['QualificationID'] },
            success: function(data){
                result = data;
            } 
        });
        if(result == 1 || result == '1'){
            $('div[number='+id+']').parent().parent().remove();
        }
    }
    
    function ConfirmDialog(message, id, okfunction){
    $('<div></div>').appendTo('body')
                    .html('<div><h6>'+message+'?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
                        width: 'auto', resizable: false,
                        buttons: {
                            Yes: function () {
                                // $(obj).removeAttr('onclick');                                
                                // $(obj).parents('.Parent').remove();

                                $(this).dialog("close");
                                okfunction(id);
                            },
                            No: function () {
                                $(this).dialog("close");
                            }
                        },
                        close: function (event, ui) {
                            $(this).remove();
                        }
                    });
    };
    
    
    var validate_additional_qualification = function(){
        isPass = true;
        value = $("#main-name").val();
        if(value.length == 0){
            $("#additional-qualification-error").text("");
            $("#main-name").attr("class","text-error margin-bottom");
            isPass = false;
        }
        else{
            $("#additional-qualification-error").text("");
            $("#main-name").attr("class","text margin-bottom");
            isPass = true;
        }
        return isPass;
    }
    
    /* ----------------Submit button click -----------*/
    $("#edit-user-contact-form-submit").on('click',function(){
        value = $("#currentid").val();
        if(value != -2){
            if(validate_additional_qualification()){
                $("#edit-user-qualification-form").submit();
            }
        }else{
            $("#edit-user-qualification-form").submit();
        }
    });
</script>